.navList {
    /* 让li水平排列 */
    display: flex;
  }

 .navList li {
    /* 相对定位 */
    position: relative;
    list-style: none;
    width: 160px;
    height: 50px;
    /* 光标变小手 */
    cursor: pointer;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 设置过渡 */
    transition: 0.5s;
  }

  .navList li div {
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  /* 每个li元素里的第一个div */
  .navList li div:first-child {
    background-color: #0c0d0e;
    transform: translateZ(25px);
  }

  /* 每个li元素里的最后一个div */
  .navList li div:last-child {
    background-color: rgb(96, 10, 225);
    transform: translateY(25px) rotateX(-90deg);
  }

  /* 鼠标移入沿X轴旋转90度 */
  .navList li:hover {
    transform: rotateX(90deg);
  }

 .container .text{
    font-size: 100px;
    font-weight: 900;
    color: #fff;
    /* 字间距 */
    letter-spacing: 10px;
    /* 字体阴影(立体厚度) */
    text-shadow: -1px 1px 0 #ddd,
    -2px 2px 0 #61d30f,
    -3px 3px 0 #468fb9,
    -4px 4px 0 #b9469a,
    -5px 5px 0 #ddd,
    -6px 6px 0 #ddd,
    -7px 7px 0 #ddd,
    -8px 8px 0 #ddd,
    -9px 9px 0 #ddd,
    -10px 10px 0 #ddd,
    -11px 11px 0 #ddd,
    -12px 12px 0 #ddd,
    -13px 13px 0 #ddd,
    -14px 14px 0 #ddd,
    -15px 15px 0 #ddd,
    -16px 16px 0 #ddd,
    -17px 17px 0 #ddd,
    -18px 18px 0 #ddd,
    -19px 19px 0 #ddd,
    -20px 20px 0 #ddd;
}
.container .text p{
    outline: none;
}

.container {
   position: relative;
}

.container .text {
  position: absolute;
  top: 5vw;
  left: 8vw;
}